import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:shenlingwuliu_flutter/utils/http.dart';

class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
  Map<String, dynamic> user = {};
  List task = [
    {"title": "任务总量", "num": "1000"},
    {"title": "完成任务量", "num": "1000"},
    {"title": "运输里程(km)", "num": "1000"}
  ];
  List functionList = [
    {
      "title": "车辆信息",
    },
    {
      "title": "任务数据",
    },
    {
      "title": "系统设置",
    }
  ];
  @override
  void initState() {
    getUserInfo();
    super.initState();
  }

  void getUserInfo() async {
    var res = await http.get('/driver/users');
    setState(() {
      user = res['data'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(
            children: [
              //背景图
              SizedBox(
                width: double.infinity,
                child: Image.asset('assets/images/bg_page_my.jpg',
                    fit: BoxFit.cover),
              ),
              //实际内容
              Container(
                width: double.infinity,
                margin: const EdgeInsets.only(top: 100),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    CircleAvatar(
                        radius: 40,
                        backgroundColor: Colors.white,
                        child: SvgPicture.asset(
                          'assets/images/ic_avatar_driver.svg',
                          width: 100,
                        )),
                    const SizedBox(height: 10),
                    Text(
                      user['name'] ?? '用户',
                      style: const TextStyle(fontSize: 20, color: Colors.white),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      '司机编号：${user['number']}',
                      style: const TextStyle(color: Colors.white, fontSize: 16),
                    ),
                    const SizedBox(height: 10),
                    Text('手机号：${user['phone']}',
                        style:
                            const TextStyle(color: Colors.white, fontSize: 16)),
                    const SizedBox(height: 10),

                    //本月任务
                    Container(
                      width: double.infinity,
                      decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      margin:
                          const EdgeInsets.only(top: 3, right: 20, left: 20),
                      padding: const EdgeInsets.only(
                          top: 10, bottom: 25, right: 20, left: 20),
                      child: Column(
                        children: [
                          const Text(
                            '- 本月任务 -',
                            style: TextStyle(
                                color: Color.fromRGBO(112, 111, 111, 1),
                                fontSize: 14),
                          ),
                          const SizedBox(height: 15),
                          Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: task.map((item) {
                                return Column(
                                  children: [
                                    Text(
                                      item['num'],
                                      style: const TextStyle(
                                          fontSize: 18,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    const SizedBox(height: 15),
                                    Text(item['title'])
                                  ],
                                );
                              }).toList())
                        ],
                      ),
                    ),
                    // 列表
                    Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(10)),
                        margin:
                            const EdgeInsets.only(top: 5, right: 20, left: 20),
                        padding: const EdgeInsets.all(10),
                        child: Column(
                          children: functionList.asMap().entries.map((entry) {
                            final index = entry.key;
                            final item = entry.value;
                            return Column(
                              children: [
                                GestureDetector(
                                  onTap: () {
                                    if (index == 2) {
                                      Navigator.pushNamed(context, '/profile');
                                    }
                                  },
                                  child: Container(
                                    padding: const EdgeInsets.all(15),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Text(
                                          item['title'],
                                          style: const TextStyle(
                                            fontSize: 16,
                                          ),
                                        ),
                                        SvgPicture.asset(
                                          'assets/images/ic_btn_more.svg',
                                          width: 20,
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                if (index < functionList.length - 1)
                                  const Divider(
                                    height: 1,
                                    thickness: 1,
                                    color: Color.fromARGB(255, 211, 211, 211),
                                  ),
                              ],
                            );
                          }).toList(),
                        ))
                  ],
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}
